<template>
    <div class="edu-page-warp">
        <div class="coursemap">
            <a @click="previewCourse" style="color:#C0C4CC" >{{$t('graduationList.completeGraduationApplyDetailTitle')}}</a>
            <span style="color:#C0C4CC">/</span>
            <span style="color:#909399">{{$t('graduationList.previewDetails')}}</span>
        </div>
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="onSubmit"
            @reset="reset('queryForm')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="120px">
                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item filterable :label="$t('label.major') + ':'" prop="profession">
                            <el-select v-model="queryForm.profession" style="width: 100%">
                                <el-option
                                    v-for="item in options.profession"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item filterable :label="$t('graduationList.submissionStatus') + ':'" prop="conclusionConformitySubmit">
                            <el-select v-model="queryForm.conclusionConformitySubmit" style="width: 100%">
                                <el-option
                                    v-for="item in options.submit"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>                  
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{ title }}</h1>
            <div class="div-main clearfix">   
                <div class="float-left">
                    <el-input
                        v-model="queryForm.name"
                        :placeholder="$t('graduationList.please')"
                        prefix-icon="el-icon-search"
                        @change="handleSearch"
                    />
                </div>
                <div class="float-right">
                    <el-button type="primary"  @click="exportFile">
                        {{ $t('graduationList.exportInconsistent') }}
                    </el-button>
                </div>
            </div>
            <EduTable
                :data="tableData"
                :total="queryForm.total"
                :pageSize="queryForm.pageSize_"
                :page-num="queryForm.pageNum_"
                @page-change="handleCurrentChange"
            >
                <el-table-column :label="$t('graduationList.studentID')" prop="studentId"></el-table-column>
                <el-table-column :label="$t('graduationList.name')" prop="name"></el-table-column>
                <el-table-column :label="$t('label.major')" prop="professionI18n" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.machineReviewNotes')" prop="machineRemark" show-overflow-tooltip  width="140"></el-table-column>
                <el-table-column :label="$t('graduationList.details')" prop="machineDetails" show-overflow-tooltip width="110"></el-table-column>
                <el-table-column :label="$t('graduationList.machineReviewConclusion')" prop="machineConclusionI18n" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.collegeAuditConclusion')" prop="manualConclusionI18n" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.inconsistentConclusions')" prop="conclusionConformityExplain" width="140" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.approvalStatus')">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 2" type="success" size="mini">{{ $t("graduationList.passed") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 3" type="warning" size="mini">{{ $t("graduationList.failed") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 1" type="info" size="mini">{{ $t("graduationList.pending") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 0" type="danger" size="mini">{{ $t("graduationList.unsubmitted") }}</el-tag>
                    </template>
                </el-table-column>
            </EduTable>
        </el-card>
        <!--导入弹框-->
        <edu-dialog ref="uploadDialog"
                    :title="$t('graduationList.exportInconsistent')"
                    :confirmBtnText="$t('graduationList.submitReview')"
                    size="small"
                    @close="clearFiles"
                    @confirm="uploadFile">
            <el-form v-loading="loading2"
                    ref="createStudentForm"
                    :model="createStudentForm"
                    label-width="85px">
                <el-row>
                    <el-form-item>
                    <el-upload ref="upload"
                                :data="{}"
                                :on-success="uploadDone"
                                :auto-upload="false"
                                :multiple="false"
                                :on-change="(file, fileList)=>{ this.fileList = fileList}"
                                :limit="1"
                                :accept="'.xlsx'"
                                :action="importUrl">
                        <el-button slot="trigger"
                                size="small"
                                type="primary">{{ $t('label.selectFile') }}
                        </el-button>
                        <el-button size="small" @click="downloadFile">{{ $t('graduationList.templateDownload') }}</el-button> 
                        <div slot="tip"
                            class="el-upload__tip">{{ $t('courseTake.uploadXLSFileOnly') }}
                        </div>
                    </el-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </edu-dialog>
    </div>
</template>
<script>
import {findConclusionConformityApplyList,findProfessionList} from 'common/src/api/graduationManagement/suspendToGraduateList'
export default {
    name: "graduationApplyDetails",
    data() {
        return {
            // 筛选相关选项
            queryForm: {
                isOverseas: "1",
                graduationDate: this.$route.params.grade, 
                faculty: this.$route.params.facultyCode, 
                profession: "", 
                conclusionConformitySubmit: "", 
                pageNum_: 1,
                pageSize_: 20,
                name:"",
                total: 0,
                isConclusionConformity: "2",
            },
            importUrl:"",
            title:"",
            // 下拉相关选项数据
            options: {
                profession: [],
                submit: [
                    {
                        value: "0",
                        label: this.$t("graduationList.unsubmitted")
                    },
                    {
                        value: "1",
                        label: this.$t("graduationList.pending")
                    },
                    {
                        value: "2",
                        label: this.$t("graduationList.passed")
                    },
                    {
                        value: "3",
                        label: this.$t("graduationList.failed")
                    }
                ],
            },
            tableData: [],
        };
    },

    created() {
        this.currentRouteUrl = this.$route.path;
        this.getMajorOptions();
        this.title = this.$route.params.faculty + this.$route.params.grade + this.$t('graduationList.completeGraduationApplyDetailListTitle');
    },
    mounted() {
        this.handleSearch();
    },
    methods: {
        handleSearch() {
            findConclusionConformityApplyList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.queryForm.pageNum_ = res.data.pageNum_;
                    this.queryForm.pageSize_ = res.data.pageSize_;
                    this.queryForm.total = res.data.total_;
                }
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val.pageNum;
            this.queryForm.pageSize_ = val.pageSize;
            this.handleSearch();
        },
        selectionChange(selection) {
            const self = this;
            self.multipleSelection = selection;
        },
        getMajorOptions() {
            this.options.profession = [];
            this.queryForm.profession = "";
            findProfessionList({
                faculty: this.$route.params.facultyCode,
                graduationDate: Number(this.$route.params.grade),
                isOverseas: "1"
            })
            .then(res => {
                if (res.code == 200) {
                    this.options.profession = res.data.map((item, index) => {
                        return {
                            label: item.professionI18n + '-' + item.professionCode,
                            value: item.professionCode
                        }
                    })
                }
            });
        },
        onSubmit() {
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.handleSearch();
        },
        reset(ref) {
            this.queryForm.name = "";
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.$refs[ref].resetFields();
            this.handleSearch();
        },

        exportFile() {
            this.importUrl = '';
            this.$refs.uploadDialog.open();
            this.importUrl = '/api/graduationservice/suspendToGraduateList/importConclusionConformityApply?graduationDate='+this.$route.params.grade+'&isOverseas=1';
        },
        uploadFile() {
			if (_.isEmpty(this.fileList)) {
				this.$message({
					type: "info",
					message: this.$t("message.selectFilePlease")
				});
				return;
			}
			this.$refs.upload.submit();
        },
        // 关闭弹出框
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.$refs.uploadDialog.close();
        },
        // 导入成功
        uploadDone(res) {
            if (res.code == 200) {
                this.$message({
                    type: 'success',
                    message: this.$t('common.tips.uploadSuccess')
                });
                this.handleSearch();
            }else{
                this.$message.error(this.$t('common.upload.uploadFialed'));
                return 
            }
            this.clearFiles();
        },
        downloadFile(){
            window.location.href = '/api/graduationservice/suspendToGraduateList/exportConclusionConformityTemplate';
        },
        previewCourse(){
            this.$router.push({
                path: '/interCompleteGraduationManage/graduationApply',
            })
        }
    },
    destroyed() {
        this.currentRouteUrl && this.$store.commit('delete_tabs',this.currentRouteUrl); 
    }
};
</script>
<style lang="scss" scoped>
    .div-main {
        margin-bottom: 16px;
    }
    .coursemap{
        margin-bottom: 10px;
    }
</style>

